<template>
  <v-container fluid class="h-full w-full !px-0 !py-0">

    <!-- 路由页面 -->
    <router-view #default="{ route, Component }" :class="{
      '!px-[24px]': mobile == false,
      '!px-[8px]': mobile == true
    }">
      <!-- 路由过渡效果 -->
      <Transition :name="$route.meta.transition || 'r-slide-fade'">
        <component :is="Component"></component>
      </Transition>
    </router-view>

    <!-- 底部版权信息 -->
    <copyright></copyright>
  </v-container>
</template>

<script setup lang="ts">
import copyright from "../components/copyright.vue"

import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
</script>

<style>
/*
  过渡动画
*/
.r-slide-fade-enter-active {
  transition: all 0.5s linear;
  overflow: hidden;
}

.r-slide-fade-leave-active {
  transition: all 0.3s linear;
  overflow: hidden;
}

.r-slide-fade-enter-from {
  transform: translateX(40px);
  opacity: 0;
}

.r-slide-fade-enter-to {
  transform: translateX(0px);
  opacity: 1;
}

.r-slide-fade-leave-from {
  transform: translateX(0px);
  opacity: 1;
}

.r-slide-fade-leave-to {
  transform: translateX(40px);
  opacity: 0;
}
</style>
